import React, {Component} from 'react'
import ReactDOM from 'react-dom'

// 受控组件：表单受react的state控制

class App extends Component{
    state = {
        txt:''
    }

    handleChange = e =>{
        this.setState({
            // 通过e这个对象来获取表单input中的value
            // e.target指向事件执行时鼠标所点击区域的那个元素。
            txt: e.target.value
        })
        // console.log(this.state.txt)
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.txt} onChange={this.handleChange} />
                <hr />
                <p>{this.state.txt}</p>
            </div>
            
        )
    }
}


ReactDOM.render(<App/>, document.getElementById('root'))